<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IP Data</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
        }
        th {
            background-color: #f2f2f2;
            cursor: pointer;
        }
        th.sorted-asc::after {
            content: ' \2191';
        }
        th.sorted-desc::after {
            content: ' \2193';
        }
    </style>
</head>
<body>
    <h1>IP Data</h1>
    <button onclick="refreshData()">Refresh</button>

    <h2>IPv4 Data</h2>
    <table id="ipv4-table">
        <thead>
            <tr>
                <th onclick="sortTable('ipv4', 'name')">Name</th>
                <th onclick="sortTable('ipv4', 'ip')">IP</th>
                <th onclick="sortTable('ipv4', 'colo')">Colo</th>
                <th onclick="sortTable('ipv4', 'latency')">Latency</th>
                <th onclick="sortTable('ipv4', 'speed')" class="sortable" data-sort-type="desc" data-column="speed">Speed</th>
                <th onclick="sortTable('ipv4', 'uptime')">Uptime</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for item in v4_data %}
            <tr>
                <td>{{ item.name }}</td>
                <td>{{ item.ip }}</td>
                <td>{{ item.colo }}</td>
                <td>{{ item.latency }}</td>
                <td>{{ item.speed }}</td>
                <td>{{ item.uptime }}</td>
                <td><button onclick="copyText('{{ item.ip }}')">Copy</button></td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    <h2>IPv6 Data</h2>
    <table id="ipv6-table">
        <thead>
            <tr>
                <th onclick="sortTable('ipv6', 'name')">Name</th>
                <th onclick="sortTable('ipv6', 'ip')">IP</th>
                <th onclick="sortTable('ipv6', 'colo')">Colo</th>
                <th onclick="sortTable('ipv6', 'latency')">Latency</th>
                <th onclick="sortTable('ipv6', 'speed')" class="sortable" data-sort-type="desc" data-column="speed">Speed</th>
                <th onclick="sortTable('ipv6', 'uptime')">Uptime</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for item in v6_data %}
            <tr>
                <td>{{ item.name }}</td>
                <td>{{ item.ip }}</td>
                <td>{{ item.colo }}</td>
                <td>{{ item.latency }}</td>
                <td>{{ item.speed }}</td>
                <td>{{ item.uptime }}</td>
                <td><button onclick="copyText('{{ item.ip }}')">Copy</button></td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    <script>
        function copyText(text) {
            navigator.clipboard.writeText(text).then(function() {
                alert('Text copied to clipboard: ' + text);
            }, function(err) {
                console.error('Could not copy text: ', err);
            });
        }

        function refreshData() {
            fetch('/refresh')
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'success') {
                        location.reload();
                    }
                });
        }

        function sortTable(tableId, column) {
            const table = document.getElementById(`${tableId}-table`);
            const tbody = table.getElementsByTagName('tbody')[0];
            const rows = Array.from(tbody.getElementsByTagName('tr'));

            // 获取排序类型
            const sortType = table.querySelector(`th.sortable[data-column="${column}"]`).dataset.sortType;
            const newSortType = sortType === 'desc' ? 'asc' : 'desc';

            // 更新表头排序图标
            table.querySelectorAll('th.sortable').forEach(th => {
                th.classList.remove('sorted-asc', 'sorted-desc');
                if (th.dataset.column === column) {
                    th.classList.add(`sorted-${newSortType}`);
                    th.dataset.sortType = newSortType;
                }
            });

            // 排序
            rows.sort((a, b) => {
                const valA = a.getElementsByTagName('td')[column === 'speed' ? 4 : column === 'latency' ? 3 : column === 'uptime' ? 5 : column === 'colo' ? 2 : column === 'ip' ? 1 : 0].textContent;
                const valB = b.getElementsByTagName('td')[column === 'speed' ? 4 : column === 'latency' ? 3 : column === 'uptime' ? 5 : column === 'colo' ? 2 : column === 'ip' ? 1 : 0].textContent;
                if (column === 'speed') {
                    return newSortType === 'asc' ? valA - valB : valB - valA;
                } else {
                    return newSortType === 'asc' ? valA.localeCompare(valB) : valB.localeCompare(valA);
                }
            });

            // 重新插入排序后的行
            rows.forEach(row => tbody.appendChild(row));
        }
    </script>
</body>
</html>